import { Col, Row, Typography } from 'antd';
import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom'
import Layout from '../../components/layout'
import $http from '../../utils/require';
import ProductItem, { ProductItemFace } from '../../components/productItem';
import Search from './components/search';

const { Title } = Typography

const Home = (props: any) => {
    // console.log('Home', props.location.pathname);

    let [listByCreatedAt, setListByCreatedAt] = useState<ProductItemFace[]>([])
    let [listBySold, setListBySold] = useState<ProductItemFace[]>([])

    useEffect(() => {
        $http['getProductList']({
            sortBy: 'createdAt',
            order: 'desc',
            limit: 10
        }).then((res: ProductItemFace[]) => {
            setListByCreatedAt(res)
        })
        $http['getProductList']({
            sortBy: 'sold',
            order: 'desc',
            limit: 10
        }).then((res: ProductItemFace[]) => {
            setListBySold(res)
        })
    }, [])

    return (
        <Layout title="首页" subtitle="尽情享受吧">
            <Search></Search>
            <Title level={5}>最新上架</Title>
            <Row gutter={[16, 16]}>
                {
                    listByCreatedAt.map(el => {
                        return <Col span="6" key={el._id}>
                            <ProductItem product={el}></ProductItem>
                        </Col>
                    })
                }
            </Row>
            <Title level={5}>最受欢迎</Title>
            <Row gutter={[16, 16]}>
                {
                    listBySold.map(el => {
                        return <Col span="6" key={el._id}>
                            <ProductItem product={el}></ProductItem>
                        </Col>
                    })
                }

            </Row>
        </Layout>
    )
}

export default withRouter(Home)
